﻿<noscript>
    <strong>很抱歉，如果没有启用JavaScript，web将无法正常工作。请启用后继续。</strong>
    <strong>We're sorry but web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<section id="upload_box" class="dialog-box">
    <section class="dialog-main">
        <section class="dialog-header">
            文件上传
        </section>
        <section class="dialog-body">
            <table class="pure-table">
                <thead>
                    <tr>
                        <th>文件名称</th>
                        <th>文件大小</th>
                        <th>修改时间</th>
                    </tr>
                </thead>
                <tbody id="files"></tbody>
            </table>
        </section>
        <section class="dialog-footer">
            <button class="pure-button" onclick="cancel()">取消</button>
            <button class="button-success pure-button" onclick="sendFiles()">上传</button>
        </section>
    </section>
</section>
<script>
    let uploadServer = './'
    let mainBody = document.querySelector('body')
    let files = []

    mainBody.addEventListener('dragover', dragoverHandle)
    mainBody.addEventListener('dragleave', dragleaveHandle)
    mainBody.addEventListener('drop', dropHandle)

    function dragoverHandle(event) {
        event.preventDefault()
    }

    function dragleaveHandle(event) {
        event.preventDefault()
    }

    function dropHandle(event) {
        event.preventDefault()
        files = Array.from(event.dataTransfer.files)

        let dataStr = '',
            status = true
        for (let file of files) {
            if (status) {
                dataStr += `<tr class="pure-table-odd"><td>${file.name}</td><td>${getFileSize(file.size)}</td><td>${formatDate(file.lastModifiedDate)}</td></tr>`
            } else {
                dataStr += `<tr><td>${file.name}</td><td>${getFileSize(file.size)}</td><td>${formatDate(file.lastModifiedDate)}</td></tr>`
            }
            status = !status
        }

        document.querySelector('#files').innerHTML = dataStr
        document.querySelector('#upload_box').style.display = 'flex'
    }

    function sendFiles() {
        let fd = new FormData()

        for (let i = 0; i < files.length; i++) {
            let fileName = `f${i}`
            fd.append(fileName, files[i])
        }

        let xhr = new XMLHttpRequest()
        xhr.open('POST', uploadServer, true)

        xhr.onreadystatechange = function () {
            console.log('upload state changed to ', xhr.readyState)
            if (xhr.status == 200) {
                location.reload()
            }
        }

        xhr.send(fd)
    }

    function cancel() {
        files = []
        document.querySelector('#upload_box').style.display = 'none'
    }

    function getFileSize(srcLength) {
        let units = ['B', 'KB', 'MB', 'GB']
        var v = srcLength
        var uIndex = 0
        while (v > 1024 && uIndex < 3) {
            uIndex++
            v /= 1024
        }
        return `${Math.round(v * 100) / 100} ${units[uIndex]}`
    }

    function formatDate(v) {
        var dt = new Date()
        if (v instanceof Date)
            dt = v
        else if (v instanceof Number) {
            dt = new Date(v)
        }
        let num_year = dt.getFullYear()
        let num_month = dt.getMonth() + 1
        let num_date = dt.getDate()
        let num_hour = dt.getHours()
        let num_min = dt.getMinutes()
        let num_sec = dt.getSeconds()

        return `${num_year}-${num_month < 10 ? '0' + num_month : num_month}-${num_date < 10 ? '0' + num_date : num_date} ${num_hour < 10 ? '0' + num_hour : num_hour}:${num_min < 10 ? '0' + num_min : num_min}:${num_sec < 10 ? '0' + num_sec : num_sec}`
    }
</script>